﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="../js/miniui/miniui.css" />
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script src="../js/vue.min.js"></script>
    <script src="../js/config.js"></script>
    <style>
        html, body {
            padding: 0px;
            margin: 0px;
        }

        #app {
            height: 100%;
            position: absolute;
            top: 0px;
            width: 100%;
        }

        .left {
            width: 240px;
            border-right: 1px solid #dddddd;
            height: 100%;
            float: left;
            overflow: auto;
        }

        .right {
            width: calc(100% - 241px);
            height: 100%;
            float: left;
            overflow: auto;
        }

        .searh_len {
            height: 104px;
            width: 236px;
        }

            .searh_len select, input,button {
                margin-top: 10px;
                margin-left: 5px;
                padding-left: 4px;
                height: 34px;
                width: 70px;
                float: left;
            }
        .setCa {
            background-color: #008e8e;
            color: white;
        }
        .item {
            height: 44px;
            line-height: 44px;
            border-bottom: 1px solid #dddddd;
            padding-left: 12px;
            overflow: hidden;
            font-size: 12px;
        }
        .item-setting {
            line-height: 34px;
            border-bottom: 1px solid #dddddd;
            padding-left: 12px;
            overflow: hidden;
            font-size: 12px;
        }
        .carame {
            width: 60px;
            margin: 5px;
            float: left;
            background-color: #beb9b9;
            color: white;
            text-align: center;
            border-radius: 9px;
        }
            .carame .n1 {
                color: red;
            }
        .carame .n2 {
             
            }
        .mini-grid-rows-view {
            height:100vh;
        }
        .mini-grid-columns-view {
            overflow: initial;
        }
        .mini-grid-topRightCell {
            width:auto;
        }
        .mini-grid-row {
            background-color: #fff;
        } 
        .colorbg {
            background-color: aliceblue;
        }

        .mini-grid-headerCell, .mini-grid-cell {
            height: 34px;
            line-height: 34px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="left">

            <div class="searh_len">
              <!--  -->
                <select  v-model="path1">
                    <option value="0">
                        全部
                    </option>
                    <option value="1">
                        点火
                    </option>
                    <option value="2">
                       熄火
                    </option>
                    <option value="3">
                        可找到平台设备
                    </option>
                    <option value="4">
                        无法找到设备
                    </option>
                    <option value="5">
                        在线
                    </option>
                    <option value="6">
                        离线
                    </option>
                </select>
                <input type="text" v-model="name1"/>
                <button @click="listquery()">查询</button>
            </div>
            <div>
                <div class="item" v-for="item in list" @click="SetClick(item)"  :class="{setCa:item.active}">{{item.ComapnyName}}</div>
            </div>
        </div>
        <div class="right">
         

            <div class="mini-grid-rows-view" style="margin-left: 0px; width: 100%;">
                <div class="mini-grid-columns-view" style="margin-left: 0px; width: auto; height: auto; padding-right: 0px;">
                    <table class="mini-grid-table" cellspacing="0" cellpadding="0" border="0" style="width: 100%;">
                        <tbody>
                            <tr style="height:0px;">
                                <td style="height:0px;width:0;"></td>
                                <td id="2" style="padding:0;border:0;margin:0;height:0px;width:50px"></td>
                                <td id="3" style="padding:0;border:0;margin:0;height:0px;width:120px"></td>
                                <td id="3" style="padding:0;border:0;margin:0;height:0px;width:120px"></td>
                                <td id="4" style="padding:0;border:0;margin:0;height:0px;width:160px"></td>
                                <td id="5" style="padding:0;border:0;margin:0;height:0px;width:120px"></td>
                                <td id="6" style="padding:0;border:0;margin:0;height:0px;width:120px"></td>
                                <td id="7" style="padding:0;border:0;margin:0;height:0px;width:120px"></td>
                                <td id="8" style="padding:0;border:0;margin:0;height:0px;width:120px"></td>
                                <td id="9" style="padding:0;border:0;margin:0;height:0px;width:120px"></td>
                                <td id="10" style="padding:0;border:0;margin:0;height:0px;width:120px"></td>
                                <td id="11" style="padding:0;border:0;margin:0;height:0px;width:120px"></td>
                                <td id="12" style="padding:0;border:0;margin:0;height:0px;width:280px"></td>
                                <td id="13" style="padding:0;border:0;margin:0;height:0px;width:80px"></td>
                                <td id="14" style="padding:0;border:0;margin:0;height:0px;width:80px"></td>
                                <td style="width:0px;"></td>
                            </tr>
                            <tr>
                                <td style="width:0;"></td>
                                <td id="mini-69$headerCell2$2" class="mini-grid-headerCell    mini-grid-bottomCell " style="text-align:center;">
                                    <div class="mini-grid-headerCell-outer">
                                        <div class="mini-grid-headerCell-inner  mini-grid-headerCell-nowrap ">序号</div>
                                        <div id="2" class="mini-grid-column-splitter"></div>
                                    </div>
                                </td>

                                <td id="mini-69$headerCell2$3" class="mini-grid-headerCell    mini-grid-bottomCell " style="text-align:center;">
                                    <div class="mini-grid-headerCell-outer">
                                        <div class="mini-grid-headerCell-inner  mini-grid-headerCell-nowrap ">运输单位</div>
                                        <div id="3" class="mini-grid-column-splitter"></div>
                                    </div>
                                </td>
                                <td id="mini-69$headerCell2$3" class="mini-grid-headerCell    mini-grid-bottomCell " style="text-align:center;">
                                    <div class="mini-grid-headerCell-outer">
                                        <div class="mini-grid-headerCell-inner  mini-grid-headerCell-nowrap ">车牌号</div>
                                        <div id="3" class="mini-grid-column-splitter"></div>
                                    </div>
                                </td>
                                <td id="mini-69$headerCell2$4" class="mini-grid-headerCell    mini-grid-bottomCell " style="text-align:center;">
                                    <div class="mini-grid-headerCell-outer">
                                        <div class="mini-grid-headerCell-inner  mini-grid-headerCell-nowrap ">最后在线时间</div>
                                        <div id="4" class="mini-grid-column-splitter"></div>
                                    </div>
                                </td>
                                <td id="mini-69$headerCell2$5" class="mini-grid-headerCell    mini-grid-bottomCell " style="text-align:center;">
                                    <div class="mini-grid-headerCell-outer">
                                        <div class="mini-grid-headerCell-inner  mini-grid-headerCell-nowrap ">状态</div>
                                        <div id="5" class="mini-grid-column-splitter"></div>
                                    </div>
                                </td>
                                <td id="mini-69$headerCell2$5" class="mini-grid-headerCell    mini-grid-bottomCell " style="text-align:center;">
                                    <div class="mini-grid-headerCell-outer">
                                        <div class="mini-grid-headerCell-inner  mini-grid-headerCell-nowrap ">状态</div>
                                        <div id="5" class="mini-grid-column-splitter"></div>
                                    </div>
                                </td>
                                <td id="mini-69$headerCell2$6" class="mini-grid-headerCell    mini-grid-bottomCell " style="text-align:center;">
                                    <div class="mini-grid-headerCell-outer">
                                        <div class="mini-grid-headerCell-inner  mini-grid-headerCell-nowrap ">经度纬</div>
                                        <div id="6" class="mini-grid-column-splitter"></div>
                                    </div>
                                </td>
                                <td id="mini-69$headerCell2$7" class="mini-grid-headerCell    mini-grid-bottomCell " style="text-align:center;">
                                    <div class="mini-grid-headerCell-outer">
                                        <div class="mini-grid-headerCell-inner  mini-grid-headerCell-nowrap ">车牌型号</div>
                                        <div id="7" class="mini-grid-column-splitter"></div>
                                    </div>
                                </td>
                                <td id="mini-69$headerCell2$7" class="mini-grid-headerCell    mini-grid-bottomCell " style="text-align:center;">
                                    <div class="mini-grid-headerCell-outer">
                                        <div class="mini-grid-headerCell-inner  mini-grid-headerCell-nowrap ">车牌品牌</div>
                                        <div id="8" class="mini-grid-column-splitter"></div>
                                    </div>
                                </td>
                                <td id="mini-69$headerCell2$7" class="mini-grid-headerCell    mini-grid-bottomCell " style="text-align:center;">
                                    <div class="mini-grid-headerCell-outer">
                                        <div class="mini-grid-headerCell-inner  mini-grid-headerCell-nowrap ">设备号</div>
                                        <div id="9" class="mini-grid-column-splitter"></div>
                                    </div>
                                </td>
                                <td id="mini-69$headerCell2$7" class="mini-grid-headerCell    mini-grid-bottomCell " style="text-align:center;">
                                    <div class="mini-grid-headerCell-outer">
                                        <div class="mini-grid-headerCell-inner  mini-grid-headerCell-nowrap ">RSIM</div>
                                        <div id="9" class="mini-grid-column-splitter"></div>
                                    </div>
                                </td>
                                <td id="mini-69$headerCell2$7" class="mini-grid-headerCell    mini-grid-bottomCell " style="text-align:center;">
                                    <div class="mini-grid-headerCell-outer">
                                        <div class="mini-grid-headerCell-inner  mini-grid-headerCell-nowrap ">GUID</div>
                                        <div id="10" class="mini-grid-column-splitter"></div>
                                    </div>
                                </td>
                                <td id="mini-69$headerCell2$8" class="mini-grid-headerCell    mini-grid-bottomCell " style="text-align:center;">
                                    <div class="mini-grid-headerCell-outer">
                                        <div class="mini-grid-headerCell-inner  mini-grid-headerCell-nowrap ">速度</div><div id="8" class="mini-grid-column-splitter">
                                        </div>
                                    </div>
                                </td>
                                
                                <td  class="mini-grid-headerCell    mini-grid-bottomCell " style="text-align:center;">
                                    <div class="mini-grid-headerCell-outer"><div class="mini-grid-headerCell-inner  mini-grid-headerCell-nowrap ">事件</div><div id="11" class="mini-grid-column-splitter"></div></div>
                                </td>
                  
                            </tr>
                        </tbody>
                    </table><div class="mini-grid-topRightCell"></div>
                </div>


                <div class="mini-grid-rows-content">
                    <table class="mini-grid-table mini-grid-rowstable" cellspacing="0" cellpadding="0" border="0" style="width: 100%;">
                        <tbody>
                            <tr style="height:0px;"><td style="height:0px;width:0;"></td><td id="2" style="padding:0;border:0;margin:0;height:0px;width:50px"></td>
                            <td id="3" style="padding:0;border:0;margin:0;height:0px;width:120px"></td>
                                <td id="3" style="padding:0;border:0;margin:0;height:0px;width:120px"></td>
                            <td id="4" style="padding:0;border:0;margin:0;height:0px;width:160px"></td>
                            <td id="5" style="padding:0;border:0;margin:0;height:0px;width:120px"></td>
                            <td id="6" style="padding:0;border:0;margin:0;height:0px;width:120px"></td>
                            <td id="7" style="padding:0;border:0;margin:0;height:0px;width:120px"></td>
                            <td id="8" style="padding:0;border:0;margin:0;height:0px;width:120px"></td>
                            <td id="9" style="padding:0;border:0;margin:0;height:0px;width:120px"></td>
                            <td id="10" style="padding:0;border:0;margin:0;height:0px;width:120px"></td>
                            <td id="11" style="padding:0;border:0;margin:0;height:0px;width:120px"></td>
                            <td id="12" style="padding:0;border:0;margin:0;height:0px;width:280px"></td>
                            <td id="13" style="padding:0;border:0;margin:0;height:0px;width:80px">
                                </td>
                                <td id="14" style="padding:0;border:0;margin:0;height:0px;width:80px"></td>
                            <td style="width:0px;"></td></tr>
                            <tr id="mini-69$emptytext2" style="display:none;"><td style="width:0"></td><td class="mini-grid-emptyText" colspan="12">没有返回的数据</td></tr>
                            <tr class="mini-grid-row  " style=" "  v-for="(item,index) in listCompanyFiter" :class="{colorbg:index%2==1}">
                                <td style="width:0;"></td>
                                <td  class="mini-grid-cell " style="text-align:center;"><div class="mini-grid-cell-inner  mini-grid-cell-nowrap " style=""><div id="mini-69$number$7189">{{index+1}}</div></div></td>
                                <td class="mini-grid-cell " style="text-align:center;">
                                <div class="mini-grid-cell-inner  mini-grid-cell-nowrap " style=""  >{{item.ComapnyName}}</div></td>
                                <td  class="mini-grid-cell " style="text-align:center;"><div class="mini-grid-cell-inner  mini-grid-cell-nowrap " style="">{{item.PlateNumber}}</div></td>
                                <td  class="mini-grid-cell " style="text-align:center;"><div class="mini-grid-cell-inner  mini-grid-cell-nowrap " style="" v-if="item.settings">
                                    {{item.settings.ReceiveDate}}</div></td>
                                <td  class="mini-grid-cell " style="text-align:center;"><div class="mini-grid-cell-inner  mini-grid-cell-nowrap " style="" v-if="item.settings">
                                    <div v-if="item.settings.VDatum.HZWDevice.IsACC==1" style="color: blue;">点火</div>
                                    <div v-if="!item.settings.VDatum.HZWDevice.IsACC==1" style="color: brown;">熄火</div></div>
                                
                                    <div  v-if="!item.settings" style="color: red;">
                                   找不到设备数据</div>
                                </td>
                                <td class="mini-grid-cell " style="text-align:center;">
                                    <div class="mini-grid-cell-inner  mini-grid-cell-nowrap " style="" v-if="item.settings">
                                        <div v-if="getTimeIs(item.settings.ReceiveDate)" style="color: blue;">在线</div>
                                        <div v-if="!getTimeIs(item.settings.ReceiveDate)" style="color: brown;">已离线</div>
                                    </div>

                                    
                                </td>
                                
                                <td  class="mini-grid-cell " style="text-align:center;"><div class="mini-grid-cell-inner  mini-grid-cell-nowrap " style="" v-if="item.settings" @click="goMap(item)">{{item.settings.WX}},{{item.settings.WY}}</div></td>
                                <td  class="mini-grid-cell " style="text-align:center;"><div class="mini-grid-cell-inner  mini-grid-cell-nowrap " style="" v-if="item.device">{{item.device.DeviceModel}}</div></td>
                                <td class="mini-grid-cell " style="text-align:center;"><div class="mini-grid-cell-inner  mini-grid-cell-nowrap " style=""  v-if="item.device">
                                   {{item.device.DeviceCompanyName}}</div></td>
                                <td class="mini-grid-cell " style="text-align:center;">
                                    <div class="mini-grid-cell-inner  mini-grid-cell-nowrap " style="" v-if="item.device">
                                        {{item.device.Device}}
                                    </div>
                                </td>
                                <td class="mini-grid-cell " style="text-align:center;">
                                <div class="mini-grid-cell-inner  mini-grid-cell-nowrap " style="" v-if="item.device">
                                    {{item.device.RSIM}}
                                </div>
                                </td>
                                <td class="mini-grid-cell " style="text-align:center;">
                                <div class="mini-grid-cell-inner  mini-grid-cell-nowrap " style="" >{{item.Vehicle}}</div></td>
                                <td  class="mini-grid-cell " style="text-align:center;"><div class="mini-grid-cell-inner  mini-grid-cell-nowrap " style="" v-if="item.settings">
                                    
                                    {{item.settings.Speed}}
                                        </div>
                                </td>
                               
                               
                                <td  class="mini-grid-cell " style="text-align:center;">
                                    <div class="mini-grid-cell-inner  mini-grid-cell-nowrap " style="">
                                        <a href="javascript:void(0)" @click="query(item)">
                                            查看
                                        </a>
                                    </div>
                                </td>
                               
                            </tr>
                      
                        </tbody>
                    </table>
                </div>
            </div>

        </div>
    </div>

    <script>
        //ups/ztpls/bl/PullCompany



        var list = new Vue({
            el: '#app',
            data: {
                list: [
                    { ComapnyName: "全部", id: "1", active: true } //公司数据
                ],
                listCompany: [], //条件展示数据
                arrCompany: [], //全部车辆数据
                status: [],
                name: "",
                path: "0",
                name1: "",
                path1: "0"
            }, computed: {
                //事件筛选
                listCompanyFiter() {

                    var listd1 = this.listCompany;
                    let listd = [];
                    for (let i = 0; i < listd1.length; i++) {
                        if (this.name == "") {
                            listd.push(listd1[i]);
                        } else {
                            if (listd1[i].PlateNumber.search(this.name) != -1) {
                                listd.push(listd1[i])
                            }
                        }
                       
                    }
                    if (this.path == 0) {
                        return listd;
                    }
                   
                    if (this.path == 1) {
                        var list = [];
                        for (var n3 = 0; n3 < listd.length; n3++) {
                            if (listd[n3].settings) {
                                if (listd[n3].settings.VDatum.HZWDevice.IsACC == 1) {
                                    list.push(listd[n3]);
                                }
                            }
                            
                        }
                        return list;
                    }
                    if (this.path == 2) {
                        var list = [];
                        for (var n3 = 0; n3 < listd.length; n3++) {
                            if (listd[n3].settings) {
                                if (listd[n3].settings.VDatum.HZWDevice.IsACC == 0) {
                                    list.push(listd[n3]);
                                }
                            }

                        }
                        return list;
                    }
                    if (this.path == 3) {
                        var list = [];
                        for (var n3 = 0; n3 < listd.length; n3++) {
                            if (listd[n3].settings) {
                                list.push(listd[n3]);
                                
                            }

                        }
                        return list;
                    }
                    if (this.path == 4) {
                        var list = [];
                        for (var n3 = 0; n3 < listd.length; n3++) {
                            if (!listd[n3].settings) {
                                list.push(listd[n3]);

                            }

                        }
                        return list;
                    }
                    if (this.path == 5) {
                        var list = [];
                        for (var n3 = 0; n3 < listd.length; n3++) {
                            if (listd[n3].settings) {
                       
                                if (this.getTimeIs(listd[n3].settings.ReceiveDate)){

                                    list.push(listd[n3]);
                                }
        
                            }

                        }
                        return list;
                    }
                    if (this.path == 6) {
                        var list = [];
                        for (var n3 = 0; n3 < listd.length; n3++) {
                            if (listd[n3].settings) {

                                if (!this.getTimeIs(listd[n3].settings.ReceiveDate)) {

                                    list.push(listd[n3]);
                                }

                            }

                        }
                        return list;
                    }

                }
            }, methods: {
                //公司添加
                addlist: function (item) {
                    //  console.log(this.list)
                    this.list.push(item);
                },
                //点击查询事件
                listquery() {
                    this.name = this.name1;
                    this.path = this.path1;
                },
                //选择公司名称 点击事件
                SetClick: function (item) {

                    this.getCart(item)
                },
                //判断在线离线
                getTimeIs: function (item) {
                    var data = new Date().format("yyyy-MM-dd hh:mm:ss");

                    var time=data.split(":");
                    var time1 = item.split(":");
                    try {
                        if (time[0] == time1[0]) {
                            var n = parseInt(time[1]) - parseInt(time[1]);
                            if (n < 5) {
                                return true;
                            }
                        }
                    } catch (e) {

                    

                    }
                    return false;

                },
                //地图
                goMap: function (item) {
                    var type = {
                        type: "map",
                        data: item,
                        time: new Date().getTime()
                    }
                   
                    window.sendlistData("Status", type);
                },
                //注册硬件判断
                setGoupDevice: function () {
                    //    console.log(this.listCompany);
                    for (var n2 = 0; n2 < this.listDevice.length; n2++) {
                        for (var n3 = 0; n3 < this.listCompany.length; n3++) {
                            if (this.listDevice[n2].PlateNumber == this.listCompany[n3].PlateNumber) {

                                this.listCompany[n3]["device"] = this.listDevice[n2];
                                //   console.log(this.arrCompany[n3]);
                            }
                        }
                    }
                },
                //获取是是否注册设备
                getDevice: function () {
                    // 
                    var _this = this;
                    httppost("ups/ztpls/bl/PullRegistration", { pageIndex: 1, pageSize: 0, IsDeleted: false, condition: {}, PlateNumber: "" },
                        function (data) {
                            _this.listDevice = data.data.result;
                            _this.setGoupDevice();

                        },
                        function (err) { });
                },
                //获取设备状态
                getStatus: function () {
                   // 
                    var _this = this;
                    httppost("ups/ztpls/bl/PullPositionRTDatas", { pageIndex: 1, pageSize: 0, IsDeleted: false, condition: {}, PlateNumber: "" },
                        function (data) {
                            //console.log(data)
                            list.status = data.data.result;
                            _this.setAll(_this.arrCompany, _this.list[0]);
                        },
                        function (err) { });

                },
               //点击查询按钮
                query: function (item) {
                    var type = {
                        type: "query",
                        data: item,
                        time: new Date().getTime()
                    }
                    console.log(item)
                    window.sendlistData("Status", type);
                },
                //判断当前设备是否存在
                setGoupStatus: function () {
                    for (var n2 = 0; n2 < this.status.length; n2++) {
                        for (var n3 = 0; n3 < this.listCompany.length; n3++) {
                            if (this.status[n2].PlateNumber == this.listCompany[n3].PlateNumber) {
                            //    console.log(this.status[n2]);
                                this.listCompany[n3]["settings"] = this.status[n2];

                            }
                        }
                    }
                },

                setActive: function (item) {
                    for (var n1 = 0; n1 < this.list.length; n1++) {
                        if (item.ComapnyName == this.list[n1].ComapnyName) {
                            this.list[n1].active = true;
                        } else {
                            this.list[n1].active = false;
                        }
                       
                    }
                },

                //更新当前展示数据
                setAll: function (listtime, item) {

                    if (item.id == "1") {              
                        this.listCompany = listtime;
                        this.setGoupStatus();
                        return;
                    }
                    var listCompany = [];
                    for (var n1 = 0; n1 < listtime.length; n1++) {
                        if (listtime[n1].Department == item.Company) {
                           // listtime[n1]["ComapnyName"] = item.ComapnyName;
                            listCompany.push(listtime[n1]);

                        }
                    }

                    this.listCompany = listCompany;
               //     console.log(this.listCompany)
                    this.setGoupStatus();
                },

                //获取车辆数据
                getCart: function (item) {
                    this.setActive(item);
                    if (this.arrCompany.length > 0) {
                        this.setAll(this.arrCompany, item);
                        this.setGoupStatus();
                    }
                    var _this = this;
                    httppost("ups/ztpls/bl/PullVehicle", { pageIndex: 1, pageSize: 0, IsDeleted: false, condition: {}, PlateNumber: "" } ,
                        function (data) {
                            var listtime = data.data.result;
                         
                            for (var n2 = 0; n2 < _this.list.length; n2++) {
                                 for (var n1 = 0; n1 < listtime.length; n1++) {
                              
                                    var itemx=_this.list[n2]
                                    if (listtime[n1].Department == itemx.Company) {
                                        listtime[n1]["ComapnyName"] = itemx.ComapnyName;
                                    }
                                }
                            }
                            _this.setAll(listtime, item);
                            _this.arrCompany = listtime;
                            _this.setGoupDevice();
                        },
                        function (err) { })
                }

            }
        });
        $(document).ready(function () {
            list.getStatus();
           //获取公司
            httppost("ups/ztpls/bl/PullCompany", { pageIndex: 1, pageSize: 0, IsDeleted: false, condition: {}, ComapnyName: "1" }

                ,
                function (data) {
                    var listtime = data.data.result;
                   
                    for (var n1 = 0; n1 < listtime.length; n1++) {
                        list.addlist(listtime[n1]);
                     
                    }
                    list.getDevice();
                    //console.log(data.data.result)
                    list.getCart(list.list[0]);
                },
                function (err) { })

        })

    </script>
</body>
</html>